The TableCaption plugin lets you add captions to your tables. Table captions also improve accessibility as they are recognized by screen readers.
# DemoIn the demo below, click the table caption to edit it. Once you click the caption, you can use the table toolbar buttonto toggle the caption on and off.
Planets of the Solar SystemNameMass (1024kg)Diameter (km)Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (掳C)Mercury0.3304,8793.74222.657.9167Venus4.8712,1048.92802.0108.2464Earth5.9712,7569.824.0149.615Mars0.6426,7923.724.7227.9-65Jupiter1898142,98423.19.9778.6-110Saturn568120,5369.010.71433.5-140Uranus86.851,1188.717.22872.5-195Neptune10249,52811.016.14495.1-200Planetary facts taken fromNasa鈥檚 Planetary Fact Sheet – Metric.This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Installation鈿狅笍 New import paths
Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.
After installing the editor, add the feature to your plugin list and toolbar configuration:
import { ClassicEditor, Table, TableCaption, TableToolbar } from 'ckeditor5';ClassicEditor.create( document.querySelector( '#editor' ), {plugins: [ Table, TableToolbar, TableCaption, /* ... */ ],toolbar: [ 'insertTable', /* ... */ ],table: {contentToolbar: ['toggleTableCaption']}} ).then( /* ... */ ).catch( /* ... */ );By default, the table caption is placed above the table. You can change the placement by setting caption-side in your content styles for the .ck-content .table > figcaption style. Changing it to caption-side: bottom will display the caption below the table.
# Common API# UI componentsThe TableCaption plugin registers the following UI component:
The toggleTableCaption button# ToolbarsTableCaption plugin allows adding the toggleTableCaption item to the toolbar. It is possible to configure its content.
# Editor commandsCommand nameCommand classBelongs to (top鈥搇evel plugin)'toggleTableCaption'ToggleTableCaptionCommandTableCaptionWe recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
# ContributeThe source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-table.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.